<template>
  <div class="question">
    <div class="title">
      <div>题库列表</div>
      <div>
        <div>
          <el-select v-model="discipline" class="m-2" placeholder="Select">
            <el-option
              v-for="item in disciplineArr"
              :key="item.label"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </div>
        <div>
          <el-button @click="dialogVisible = true">添加新题</el-button>
        </div>
        <div>
          <el-button>Default</el-button>
        </div>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="title" label="题目" width="1140" />
        <el-table-column prop="grouping" label="类型" width="100" align="center" />
        <el-table-column prop="difficulty" label="难度" align="center" />
      </el-table>
      <div class="pagination">
        <el-pagination
          :page-size="14"
          background
          layout="prev, pager, next"
          :total="max"
          @current-change="currentChange"
        />
      </div>
    </div>
  </div>
  <el-dialog
    v-model="dialogVisible"
    title="添加新题"
    width="50%"
    :before-close="handleClose"
  >
    <div>
      <el-form :model="form" label-width="120px">
        <el-form-item label="题目">
          <el-input v-model="form.title" :rows="2" type="textarea" />
        </el-form-item>
        <el-form-item label="难度">
          <el-input-number v-model="form.difficulty" :min="1" :max="3" />
        </el-form-item>
        <el-form-item label="类型">
          <el-input v-model="form.grouping" />
        </el-form-item>
        <el-form-item label="选项">
          <el-form-item label="A:" label-width="30px">
            <el-input v-model="form.options.A"></el-input>
          </el-form-item>
          <el-form-item label="B:" label-width="30px">
            <el-input v-model="form.options.B"></el-input>
          </el-form-item>
          <el-form-item label="C:" label-width="30px">
            <el-input v-model="form.options.C"></el-input>
          </el-form-item>
        </el-form-item>
        <el-form-item label="答案">
          <el-input v-model="form.answer" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="addChoose">Confirm</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import {Homework} from "../../api"
import {onMounted, reactive, ref} from "vue"
import {ElMessageBox, ElMessage} from "element-plus"
interface tableType {
  title: string
  grouping: string
  difficulty: number
}
const form = reactive({
  title: "",
  options: {
    A: "",
    B: "",
    C: ""
  },
  difficulty: 0,
  grouping: "",
  answer: ""
})
const dialogVisible = ref(false)
const discipline = ref("数学")
const max = ref(0)
const disciplineArr = ref([
  {
    label: "数学"
  }
])
const tableData = ref([])
onMounted(async () => {
  const res = await Homework.getChooseMax()
  max.value = res.data.chooseMax
  getTableData()
})
const getTableData = async (page: number = 1) => {
  console.log(page)
  const res = await Homework.getChoose({limit: 14, page: page})
  tableData.value = res.data.chooseArr.map((item: tableType) => item)
}
const currentChange = (val: number) => {
  console.log(val)
  getTableData(val)
}
const addChoose = async () => {
  const data = {
    ...form,
    options: JSON.stringify(form.options)
  }
  const res = await Homework.issueChoose({chooseArr: [data]})
  if (res.code == 0) {
    ElMessage({
      message: res.msg,
      type: "success"
    })
    dialogVisible.value = false
    getTableData()
  } else {
    ElMessage.error(res.msg)
  }
}
const handleClose = (done: () => void) => {
  ElMessageBox.confirm("是否退出编辑")
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
</script>
<style lang="scss" scoped>
.question {
  padding: 50px;
  .title {
    display: flex;
    justify-content: space-between;
    & > div {
      display: flex;
      & > div {
        margin-left: 30px;
      }
    }
  }
  .table {
    margin-top: 50px;
    height: 600px;
    position: relative;
    .pagination {
      position: absolute;
      bottom: -50px;
      right: 20px;
    }
  }
}
</style>
